<template>
	<swiper-item>
		<view class="swiper-item" id="content-wrap2">
			<view class="content">
				<view class="contentBox" v-for="item in 10">
					<image src="https://img.js.design/assets/img/60c0a0e29344d9ed641a83e0.png" class="oimage" mode="">
					</image>
					<view class="theTitleOfTheCard">
						<view class="">
							历史
						</view>
						<view class="">
							...
						</view>
					</view>
					<view class="cardContents">
						<view>
							Michael Jackson
						</view>
						<view>
							10 Songs
						</view>
					</view>
				</view>
			</view>
		</view>
	</swiper-item>
</template>

<script>
	export default {
		data() {
			return {
				src: '@/static/image/songs/unsplash1.png',
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		width: 750rpx;
		padding-bottom: 80px;

		.content {
			width: 90%;
			margin: 0 auto;
			display: flex;
			padding-top: 10rpx;
			justify-content: space-between;
			flex-wrap: wrap;

			.contentBox {
				width: 312rpx;
				height: 414rpx;
				// background-color: #fff;
				margin-top: 20rpx;

				.oimage {
					width: 312rpx;
					height: 312rpx;
					display: block;
				}

				.theTitleOfTheCard {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(238, 238, 238, 1);

					margin-top: 32rpx;

				}

				.cardContents {
					width: 100%;
					/** 文本1 */
					font-size: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					color: rgba(193, 192, 192, 1);
					text-align: left;



				}




			}

		}

	}
</style>